<template>
  <div>
    <van-nav-bar
      left-arrow
      title="地图找房"
      @click-left="$router.back()"
    />
    <baidu-map
      :center="center"
      :zoom="zoom"
      style="height: 621px; width: 100%"
      :scroll-wheel-zoom="true"
    >
      <!-- 比例尺 -->
      <bm-navigation anchor="BMAP_ANCHOR_BUTTON_RIGHT"></bm-navigation>
      <!-- 定位 -->
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
        :offset="{width: 10, height: 90}"
      ></bm-geolocation>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <!-- 搜索填充组件 -->
      <bm-control>
        <bm-auto-complete
          v-model="keyword"
          :sugStyle="{zIndex: 1}"
        >
          <van-search placeholder="请输入地名关键字"></van-search>
          <!-- 这里指代一个自定义搜索框组件 -->
        </bm-auto-complete>
      </bm-control>
      <bm-local-search
        :keyword="keyword"
        :auto-viewport="true"
      ></bm-local-search>
      <!-- 标签 -->
      <bm-label
        v-for="(item,index) in houseData"
        :key="index"
        :position="{ lng: item.coord.longitude, lat: item.coord.latitude }"
        :labelStyle="{fontSize: '14px', color: '#fff'}"
        :content="item.label + `</br><p>${item.count}</p>`"
        @click="handleClick(item.value)"
      ></bm-label>
    </baidu-map>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'map-page',
  components: {},
  props: {},
  data () {
    return {
      keyword: '',
      center: {
        lng: 116.38,
        lat: 39.90
      },
      zoom: 11
    }
  },
  computed: {
    ...mapState('city', ['city']),
    ...mapState('map', ['houseData'])
  },
  created () {
    this.$store.dispatch('community/getCommunity', { id: this.city.value })
    this.$store.dispatch('map/getMapData', { id: this.city.value })
    this.center = this.city.label
  },
  methods: {
    async handleClick (value) {
      await this.$store.dispatch('map/getMapData', { id: value })
      const { longitude, latitude } = this.houseData[0].coord
      this.center = {
        lng: longitude - 0,
        lat: latitude - 0
      }
      this.zoom += 2
    }
  },
  watch: {
  }
}
</script>

<style scoped lang='less'>
.sample {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  line-height: 20px;
  background: rgb(33, 185, 122);
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
.van-search {
  width: 160%;
  background-color: transparent;
  transform: translate(5%);
  margin-top: 10px;
  .van-search__content {
    padding: 0;
    .van-cell {
      border-radius: 5px;
      padding-left: 5px;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
    }
  }
}
/deep/label.BMapLabel {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  text-align: center;
  padding: 20px 0 !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  background-color: #21b97a !important;
  border: 0 !important;
}
</style>
